<ui:composition template="/templates/layout.xhtml"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui">
     <ui:define name="content">
         <h:form id="form">
             <p:dataTable id="dataTable" var="grupo" value="#{MantenimientoController.lazyGrupoModel}" styleClass="userDataTableStyle"
                          paginator="true" rows="10" selection="#{MantenimientoController.selectedGrupos}"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        lazy="true" rowsPerPageTemplate="10,15,50">
                <f:facet name="header">
                    Lista Estados
                </f:facet>  
                <p:column selectionMode="multiple" style="width:18px" />  
                <p:column  sortBy="#{grupo.nombre}">
                    <f:facet name="header">
                        <h:outputText value="Nombre" />
                    </f:facet>
                    <p:commandLink value="#{grupo.nombre}" update=":userDetailForm:display" oncomplete="userDialog.show()"  title="View">
                        <p:ajax event="click" listener="#{MantenimientoController.onRowSelectGrupo(MantenimientoController.lazyGrupoModel.rowData)}" update=":userDetailForm:display" oncomplete="userDialog.show()" /> 
                        
                    </p:commandLink>
                </p:column>

                <p:column sortBy="#{grupo.descripcion}">
                    <f:facet name="header">
                        <h:outputText value="Descripcion" />
                    </f:facet>
                    <h:outputText value="#{grupo.descripcion}" />
                </p:column>

                <p:column sortBy="#{estado.tipo}">
                    <f:facet name="header">
                        <h:outputText value="Tipo" />
                    </f:facet>
                    <h:outputText value="#{estado.tipo}" />
                </p:column>
               <f:facet name="footer">
                    <p:commandButton value="Nuevo Grupo" oncomplete="newUserDialog.show()" icon="ui-icon-star" title="Crear nuevo Grupo"/>
                    <p:commandButton value="Eliminar Grupos" actionListener="#{MantenimientoController.doDeletegrupo}" update="dataTable" icon="ui-icon-trash"/>
                </f:facet>
            </p:dataTable>
         </h:form>   
         
             
             <p:dialog header="Detalles Grupo" widgetVar="userDialog" resizable="false" id="userDlg" > 
               <h:form id="userDetailForm">
                <p:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">   

			<h:outputText value="Nombre :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.selectedGrupo.nombre}" required="true" requiredMessage="Please Enter Name!"/>

			<h:outputText value="Descripcion :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.selectedGrupo.descripcion}" required="true" requiredMessage="Please Enter Lastname!"/>

			<h:outputText value="Tipo :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.selectedGrupo.tipo}"/>
                        
                         <h:outputText value="Estado :"></h:outputText>
                        <h:selectOneListbox value="#{MantenimientoController.selectedGrupo.estado}">
                            <f:selectItem itemLabel="Activo" itemValue="A"/>
                            <f:selectItem itemLabel="Inactivo" itemValue="I"/>                            
                        </h:selectOneListbox>
                    <f:facet name="footer">
                        <p:commandButton value="Actualizar" update=":form:dataTable, :growl"  oncomplete="handleSubmitRequest(xhr, status, args, 'userDlg','newUserForm'); " actionListener="#{MantenimientoController.doUpdateEstado}"/>
                    </f:facet>
                </p:panelGrid> 
             </h:form>
          </p:dialog> 
                         
             
          <p:dialog header="Crear nuevo Grupo" widgetVar="newUserDialog" resizable="false" id="newUserDlg" > 
              <h:form id="newUserForm">
                <p:panelGrid id="displayNewUser" columns="2" cellpadding="4" style="margin:0 auto;">   

			<h:outputText value="Nombre :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.newGrupo.nombre}" required="true" requiredMessage="Please Enter Name!"/>

			<h:outputText value="Descripcion :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.newGrupo.descripcion}" required="true" requiredMessage="Please Enter Lastname!"/>

			<h:outputText value="Tipo :"></h:outputText>
                        <h:inputText value="#{MantenimientoController.newGrupo.tipo}"/>
                        
                         <h:outputText value="Estado :"></h:outputText>
                        <h:selectOneListbox value="#{MantenimientoController.newGrupo.estado}">
                            <f:selectItem itemLabel="Activo" itemValue="A"/>
                            <f:selectItem itemLabel="Inactivo" itemValue="I"/>                            
                        </h:selectOneListbox>
                    <f:facet name="footer">
                        <p:commandButton value="Enviar" update=":form:dataTable, :growl"  oncomplete=" handleSubmitRequest(xhr, status, args, 'newUserDlg','newUserForm');" actionListener="#{MantenimientoController.doCreateGrupo}"/>
                            <p:commandButton type="reset" value="Reset"></p:commandButton>                            
                    </f:facet>
                </p:panelGrid>  
              </h:form>
          </p:dialog> 
      
<p:growl id="growl" showDetail="true" life="5000" />
         
<script type="text/javascript">  
    function handleSubmitRequest(xhr, status, args, dialogName, formName) {  
            dialog = jQuery('#'+dialogName);
        if(args.validationFailed) {  
            dialog.effect("shake", { times:3 }, 100);  
        } else {
            clearForm(formName);
            newUserDialog.hide(); 
            userDialog.hide(); 
        }  
    }
    function clearForm(formName){
        jQuery('#'+formName).each(function(){
	        this.reset();
	});
    }
</script> 
     </ui:define>
</ui:composition>